import React,{ Component } from 'react';
import Counter from './Counter';
import Summary from './Summary';

const style = {
  margin : '20px'
}

class ControlPanel extends Component {
  constructor(props) {
    super(props);

    this.onCounterUpdate = this.onCounterUpdate.bind(this);
    this.initValues = [0, 10 ,20];
    const initSum = this.initValues.reduce((a,b) => a + b,0)
    this.state = {
      sum : initSum
    };
  }
  onCounterUpdate(newValue,previousValue) {
    const valueChange = newValue - previousValue;
    this.setState({sum : this.state.sum + valueChange})
  }
  render() {
    console.log('enter ControlPanel render ');
    return (
      <div style={style}>
        <Counter caption="First"/>
        <Counter caption="Second" />
        <Counter caption="Third"/>
        <hr/>
        <Summary />
      </div>
    );
  }
}

export default ControlPanel;
